<template>
	<view class="popule-message">
		<view class="mask" v-if="shows" @tap.stop="clear"></view>
		<view class="popule-pwd-err02" v-if="shows" @tap.stop="''">
			<view class="popule-pwd-err-content">
				<view class="popule-pwd-err-t" v-if="title">
					{{title}}
				</view>
				<view class="close" @tap.stop="clear"><i class="iconfont icon icon-cha"></i></view>
				<view class="popule-pwd-err-c">
					{{message}}
				</view>
				<view class="popule-pwd-err-nav">
					<!-- <u-button size="default" :customStyle="somebuttomn" :ripple="true" rippleBgColor="#28f09e" type="primary" @tap.stop="clear">{{i18n.confirm}}</u-button>
					<u-button size="default" :customStyle="somebuttomn" :ripple="true" rippleBgColor="#28f09e" type="primary" @click="jump">{{i18n.confirm}}</u-button> -->
					<view  hover-class="active" @tap.stop="clear">{{i18n.cancel}}</view>
					<view  hover-class="active" @tap.stop="jump" v-if="rightText">{{rightText}}</view>
					<view  hover-class="active" @tap.stop="jump"  v-if="!rightText">{{i18n.confirm}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				somebuttomn: {
					background:'#ffffff',
					color:'#28f09e',
					width:'50% !important'
				}
			}
		},
		props:{
			title:{
				type: String,
				default: ''
			},
			rightText:{
				type: String,
				default: ''
			},
			shows:{
				type: Boolean,
				default: false
			},
			message:{
				type: String,
				default: ''
			}
		},
		computed:  {
			i18n() {
				return this.$t('message');
			}
		},
		methods:{
			clear(){
				this.$emit('close',1);
			},
			jump(){
				this.$emit('jump',1);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/scss/variable.scss';
	.popule-message{
		.mask{
			position: fixed;
			top:0;  
			left:0;  
			z-index:88;  
			width:100%;  
			height:100vh;  
			background:rgba(0,0,0,0.6); 
		}
		.popule-pwd-err02{
			position: fixed;
			left: 50%;
			top: 30%;
			transform: translate(-50%);
			z-index: 99;
			.popule-pwd-err-content{
				background-color: #ffffff;
				border-radius: 20upx;
				width: 640upx;
				// padding: 94upx 0 0;
				position: relative;
				overflow: hidden;
				.popule-pwd-err-t{
					font-size:32rpx;
					font-weight: bold;
					text-align: center;
					line-height: 120rpx;
					color: $black;
				}
				.close{
					position: absolute;
					right: 30upx;
					top: 30upx;
					color: rgba($color: #000000, $alpha: 0.3);
				}
				.popule-pwd-err-c{
					font-size: 34upx;
					color: rgba($color: #000000, $alpha: 0.8);
					width: 440upx;
					margin: 0 auto;
					// line-height: 110rpx;
					padding: 56rpx 0;
					// margin-bottom: 56upx;
					text-align: center;
				}
				.popule-pwd-err-nav{
					border-top: 1upx solid rgba($color: #000000, $alpha: 0.1);
					padding-top: 2upx;
					width: 100%;
					display: flex;
					align-items: center;
					view{
						flex: 1;
						color: $black;
						line-height: 100rpx;
						text-align: center;
						font-weight: bold;
						font-size: 30rpx;
						&.active{
							background: rgba($color: #000000, $alpha: 0.1);
						}
						&:first-of-type{
							color: rgba($color: #000000, $alpha: 0.3);
							border-right: 1upx solid rgba($color: #000000, $alpha: 0.05);
						}
					}
				}
			}
		}
	}
	
</style>
